<template>
    <div class="item">
        <div class="title">{{ title }}</div>
        <div class="content">{{ content }}</div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        content: {
            type: String,
            default: ''
        }
    }
}
</script>

<style lang="less" scoped>
    .item {
        display: flex;
        // 横向布局
        flex-direction: row;
        // 左侧对齐
        justify-content: flex-start;
        // 垂直居中
        align-items: center;
        overflow: hidden;
        height: .44rem;
        line-height:.44rem;
        background: #fff;
        margin-bottom: .15rem;
        border: 1px solid #ddd;
        border-radius:.1rem;
       .title {
            width: 1rem;
            font-size:.18rem;
            margin-right: .15rem;
            color: #ed4040;
            text-align: center;
        }
       .content {
            font-size:.14rem;
            color: #333;
            // 让文字超出部分显示省略号 限制不显示超出部分的内容
            overflow: hidden;
            // 文字超出部分显示省略号 设置超出部分的内容显示为省略号
            text-overflow: ellipsis;
            // 文字超出部分显示省略号 设置不换行
            white-space: nowrap;
            // 最大字数
            max-width: 2rem;
        }
    }
</style>